<template>
<div class="header">
  <!-- 动态加载不同 Header（根据路由匹配） -->
  <component :is="currentHeader" />
</div>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import ShouyeHeader from './header/shouye.vue';   // 首页 Header（带标签页）
import JingxuanHeader from './header/jingxuan.vue'; // 精选 Header
import DongtaiHeader from './header/dongtai.vue';   // 动态 Header
import WodeHeader from './header/wode.vue';       // 我的 Header
import ShezhiHeader from './header/shezhi.vue';     // 设置 Header

// 路由 & 响应式
const route = useRoute();
const router = useRouter();

// 路由 -> Header 映射（关键！）
const routeHeaderMap = {
  Remen: ShouyeHeader,   // 首页（对应原标签页）
  Tuijian: ShouyeHeader, // 推荐（复用首页 Header 标签页）
  Yingshi: ShouyeHeader, // 影视（复用首页 Header 标签页）
  Zhibo: ShouyeHeader,   // 直播（复用首页 Header 标签页）
  Zhuifan: ShouyeHeader, // 追番（复用首页 Header 标签页）
  Jingxuan: JingxuanHeader, // 精选（独立 Header）
  Dongtai: DongtaiHeader,   // 动态（独立 Header）
  Wode: WodeHeader,       // 我的（独立 Header）
  Shezhi: ShezhiHeader,     // 设置（独立 Header）
};

// 动态渲染 Header
const currentHeader = computed(() => {
  // 从路由名称匹配 Header
  return routeHeaderMap[route.name as keyof typeof routeHeaderMap] || ShouyeHeader;
});

// 保持标签页与路由同步（针对 ShouyeHeader）
watch(route, (newRoute) => {
  if (currentHeader.value === ShouyeHeader) {
    // 通知 ShouyeHeader 更新 activeName
    ShouyeHeader.props?.activeName?.default(newRoute.name as string);
  }
});
</script>

<style scoped>
.header {
  height: 60px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
</style>